<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 初始化css -->
    <link rel="stylesheet" th:href="@{/css/base.css}">
    <!-- register css文件 -->
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <!-- <script th:src="@{/js/reg.js}"></script>-->
</head>

<body>
<div class="w">
    <!-- header -->
    <div class="header">
        <div class="logo">
            <a href="index.html">
                <img th:src="@{/img/logo.png}" alt="">
            </a>
        </div>
    </div>
    <!-- registerarea -->
    <div class="registerarea">
        <h3>
            用户登录
            <em>
                我还没有账号，去<a href="register.html">注册</a>
            </em>
        </h3>
        <div class="reg_form">
            <form>
                <div id="loginErrorInfo" style="text-align: center;color:red;"></div>
                <ul>
                    <li>
                        <label for="username">账号:</label>
                        <input type="text" class="inp" id="username">
                        <span class="">
						
						</span>
                    </li>
                    <li>
                        <label for="password">密码:</label>
                        <input type="text" class="inp" id="password">
                        <span>
                            </span>
                    </li>
                    <li class="agree">

                        <input type="checkbox" id="agree">同意协议并登录
                        <a href="#">《品优购用户协议》</a>
                    </li>
                    <li>
                        <a href="index.html">
                            <input type="submit" value="登录" class="over">
                        </a>
                    </li>
                </ul>
            </form>

        </div>
    </div>
    <div class="footer">
        <p class="links">
            关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益
            | English Site | Contact U
        </p>

        <p class="copyright">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:
            zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
        </p>
    </div>
</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/md5.js"></script>
<script type="text/javascript">

    // let pwd = "123";
    // console.log(md5(pwd));
    // console.log(md5(pwd, "a"));
    // console.log(md5(pwd, "b"));
    // console.log(md5(pwd).length);

    $(function () {
        console.log("登录");
        // 给页面元素绑定事件
        bindEvent();
    });

    function bindEvent() {
        $(".reg_form>form").submit(() => {
            // 获取用户名和密码
            let username = $("#username").val().trim();
            let password = $("#password").val().trim();
            let agree = $("#agree")[0].checked;
            if (agree == false) {
                alert('尚未选择同意协议，请选择同意');
                return false;
            }
            if (username == '') {
                $("#username").next().html('请请输入用户名');
                return false;
            } else {
                $("#username").next().html('');
            }
            if (password == '') {
                $("#password").next().html('请请输入密码');
                return false;
            } else {
                $("#password").next().html('');
            }
            // 再发送异步请求之前需要对密码加密
            password = md5(password);
            // 发送异步请求判断登录是否成功
            $.post('/api/user/login', {
                username, password
            }, data => {
                console.log(data);
                // 判断登录是成功的，跳转到系统首页
                if (data['code'] == 200) {
                    // 登录成功
                    $("#loginErrorInfo").html('');
                    // 跳转
                    window.location.href = "index.html";
                } else {
                    // 登录失败
                    $("#loginErrorInfo").html(data['msg']);
                }
            }, 'json');
            return false;
        });
    }

</script>
</body>

</html>